<template>
	<view class="song">

		<image class="img" :src="song.img"></image>

		<view class="title">{{ song.title }}</view>
		<view class="price-flex-box">
			<view class="price">￥{{song.price}}</view>
			<view class="marketPrice">{{song.marketPrice}}</view>
		</view>
	</view>
</template>

<script>

	export default {
		props: {
			song: {
				type: Object,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
	
		}
	}
</script>

<style lang="scss">
	.song {
		margin: 0 0 22rpx 22rpx;
		width: 342rpx;
		height: 502rpx;
		line-height: 34rpx;
		color: #333;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 26rpx;

		.img {
			width: 342rpx;
			height: 342rpx;
			margin-bottom: 24rpx;
			background: #eee;
		}

		.title {
			height: 64rpx;
			margin-top: 12rpx;
			line-height: 30rpx;
		}

		.price {
			color: #ff5000;
		}

		.marketPrice {
			margin-left: 10px;
			font-size: 24rpx;
			color: #979797;
			text-decoration: line-through;
		}
	}
</style>
